<template>
  <div class="for-demo">
    <el-tag v-for="item in arr" :key="item.id">
      {{ item.title }} -- {{ item.id }}
    </el-tag>
    <br />
    <el-button type="primary" size="mini" @click="remove">
      删除第二项
    </el-button>
    <el-button type="primary" size="mini" @click="insert">
      中间插入一项
    </el-button>
  </div>
</template>

<script>
export default {
  name: 'for-demo',
  data() {
    return {
      arr: [
        {
          id: 4,
          title: '读书',
          slug: 'yD9GAd'
        },
        {
          id: 83,
          title: '摄影',
          slug: '7b2be866f564'
        },
        {
          id: 283250,
          title: '手绘',
          slug: '8c92f845cd4d'
        }
      ]
    }
  },
  methods: {
    remove() {
      this.arr.splice(1, 1)
    },
    insert() {
      this.arr.splice(2, 0, {
        id: 545,
        title: '互联网',
        slug: '8c92f'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.for-demo {
  .el-tag {
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
</style>
